<template>
  <div class="crash-report">
    <el-form :inline="true" v-model="selectForm">
      <el-form-item label="AppId">
        <el-select clearable filterable size="small" v-model="selectForm.appId" placeholder="选择状态码">
          <el-option
          v-for="item in selectForm.appIds"
          :key="item.appid"
          :label="item.name"
          :value="item.appid">
          </el-option>
        </el-select>
      </el-form-item>      
      <el-form-item label="状态码">
        <el-select clearable filterable size="small" v-model="selectForm.httpCode" placeholder="选择状态码">
          <el-option
          v-for="item in selectForm.httpCodes"
          :key="item.code"
          :label="item.code"
          :value="item.code">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间">
          <el-date-picker
          size="small"
          v-model="selectForm.dateRange"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format='yyyy-MM-dd HH:mm'
          :default-time="['00:00:00', '23:59:59']">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button size="small" :loading="false" @click="getPageData">查询</el-button>
        </el-form-item>
    </el-form>
    <el-row>
      <h4 class="http-code-title" style="padding-left: 15px; font-size: 18px;">错误码分析: {{ titleDate }}</h4>
      <el-col :span="24">
        <el-button v-show="isModule" class="btn-center" type="primary" icon="el-icon-document" @click="getModuleData('uri')"></el-button>
        <div id="uri-report" style="width: 100%; height:490px;" v-loading="uriLoading"></div>
      </el-col>
      <el-col :span="12">
        <el-button v-show="isModule" class="btn-center" type="primary" icon="el-icon-document" @click="getModuleData('os')"></el-button>
        <div id="os-report" style="width: 100%; height:450px;" v-loading="osLoading"></div>
      </el-col>
      <el-col :span="12">
        <el-button v-show="isModule" class="btn-center" type="primary" icon="el-icon-document" @click="getModuleData('appVersion')"></el-button>
        <div id="appversion-report" style="width: 100%; height:450px;" v-loading="appVersionLoading"></div>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="optionVisible" :fullscreen="true" :center="true">
      <span slot="title">
        <el-button class="defined-close-btn" type="primary" @click="optionVisible = false">返回</el-button>
        <span class="err-title">{{optionTitle}}</span>
      </span>
      <el-table :data="optionData">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="right" inline class="table-form-expand">
              <el-form-item>
                <label>服务端时间</label>
                <span>{{ props.row.serviceTime }}</span>
              </el-form-item>
              <el-form-item>
                <label>osId</label>
                <span v-if="props.row.osId === '1'">Android</span>
                <span v-else-if="props.row.osId === '2'">IOS</span>
                <span v-else-if="props.row.osId === '3'">H5</span>
                <span v-else>{{ props.row.osId }}</span>
              </el-form-item>
              <el-form-item>
                <label>响应状态码</label>
                <span>{{ props.row.status }}</span>
              </el-form-item>
              <el-form-item>
                <label>运行商</label>
                <span>{{ props.row.operator }}</span>
              </el-form-item>
              <el-form-item class="line-block">
                <label>原始内容</label>
                <span class="line-break">{{ props.row.content }}</span>
              </el-form-item>
              <el-form-item>
                <label>城市</label>
                <span>{{ props.row.city }}</span>
              </el-form-item>
              <el-form-item>
                <label>省份</label>
                <span>{{ props.row.province }}</span>
              </el-form-item>
              <el-form-item>
                <label>国家</label>
                <span>{{ props.row.nation }}</span>
              </el-form-item>
              <el-form-item>
                <label>客户端IP</label>
                <span>{{ props.row.iP }}</span>
              </el-form-item>
              <el-form-item>
                <label>客户端时间</label>
                <span>{{ props.row.time }}</span>
              </el-form-item>
              <el-form-item>
                <label>响应时间</label>
                <span>{{ props.row.responseTime }}</span>
              </el-form-item>
              <el-form-item>
                <label>返回大小</label>
                <span>{{ props.row.contentLength }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备分辨率</label>
                <span>{{ props.row.screen }}</span>
              </el-form-item>
              <el-form-item>
                <label>操作系统版本</label>
                <span>{{ props.row.osVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>操作系统</label>
                <span>{{ props.row.os === '2' ? 'Android' : props.row.os }}</span>
              </el-form-item>
              <el-form-item>
                <label>网络类型</label>
                <span>{{ props.row.netType }}</span>
              </el-form-item>
              <el-form-item>
                <label>model</label>
                <span>{{ props.row.model }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备型号</label>
                <span>{{ props.row.machineModel }}</span>
              </el-form-item>
              <el-form-item>
                <label>imei</label>
                <span>{{ props.row.imei }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备id</label>
                <span>{{ props.row.deviceId }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备品牌</label>
                <span>{{ props.row.brand }}</span>
              </el-form-item>
              <el-form-item class="line-block">
                <label>内核版本</label>
                <span>{{ props.row.coreVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>页面相对路径</label>
                <span>{{ props.row.uRI }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用id</label>
                <span>{{ props.row.appId }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用版本</label>
                <span>{{ props.row.appVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用名称</label>
                <span>{{ props.row.appName }}</span>
              </el-form-item>
              <el-form-item>
                <label>dpid</label>
                <span>{{ props.row.dpid }}</span>
              </el-form-item>
              <el-form-item>
                <label>用户卡号</label>
                <span>{{ props.row.userID }}</span>
              </el-form-item>
            </el-form>
          </template> 
        </el-table-column>
        <el-table-column property="serviceTime" label="服务端时间" min-width="180" :formatter="formatTime"></el-table-column>
        <el-table-column property="osId" label="osId" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.osId === '1'">Android</span>
            <span v-else-if="scope.row.osId === '2'">IOS</span>
            <span v-else-if="scope.row.osId === '3'">H5</span>
            <span v-else>{{scope.row.osId}}</span>
          </template>
        </el-table-column>
        <el-table-column property="status" label="响应状态码" min-width="100"></el-table-column>
        <!-- <el-table-column property="content" label="原始内容" min-width="220" show-overflow-tooltip></el-table-column> -->
        <el-table-column property="operator" label="运行商" min-width="100"></el-table-column>
        <el-table-column property="city" label="城市" min-width="80"></el-table-column>
        <el-table-column property="province" label="省份" min-width="80"></el-table-column>
        <el-table-column property="nation" label="国家" min-width="80"></el-table-column>
        <el-table-column property="iP" label="客户端IP" min-width="140"></el-table-column>
        <el-table-column property="time" label="客户端时间" min-width="180" :formatter="formatTime"></el-table-column>
        <el-table-column property="responseTime" label="响应时间" min-width="110"></el-table-column>
        <el-table-column property="contentLength" label="返回大小" min-width="80"></el-table-column>
        <!-- <el-table-column property="screen" label="设备分辨率" min-width="100"></el-table-column> -->
        <!-- <el-table-column property="osVersion" label="操作系统版本" min-width="110"></el-table-column> -->
        <!-- <el-table-column property="os" label="操作系统" min-width="80"></el-table-column> -->
        <!-- <el-table-column property="netType" label="网络类型" min-width="80"></el-table-column> -->
        <!-- <el-table-column property="model" label="model" min-width="70"></el-table-column> -->
        <!-- <el-table-column property="machineModel" label="设备型号" min-width="160"></el-table-column> -->
        <!-- <el-table-column property="imei" label="imei" min-width="180"></el-table-column> -->
        <!-- <el-table-column property="deviceId" label="设备id" min-width="170"></el-table-column> -->
        <!-- <el-table-column property="coreVersion" label="内核版本" min-width="120" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column property="brand" label="设备品牌" min-width="90"></el-table-column> -->
        <!-- <el-table-column property="uRI" label="页面相对路径" min-width="220" show-overflow-tooltip></el-table-column> -->
        <!-- <el-table-column property="appId" label="应用id" min-width="70"></el-table-column> -->
        <!-- <el-table-column property="appVersion" label="应用版本" min-width="80"></el-table-column> -->
        <!-- <el-table-column property="appName" label="应用名称" min-width="120"></el-table-column> -->
        <!-- <el-table-column property="dpid" label="dpid" min-width="300"></el-table-column> -->
        <!-- <el-table-column property="userID" label="用户卡号" min-width="120"></el-table-column> -->
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="optionParams.currPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="optionParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="optionParams.totalCount">
      </el-pagination>
    </el-dialog>


    <el-dialog :visible.sync="moduleVisible" :center="true" @close='moduleHide'>
      <span slot="title">
        <el-button class="defined-close-btn" type="primary" @click="moduleVisible = false">返回</el-button>
        <span class="err-title">{{moduleTitle}}</span>
      </span>
      <el-table :data="moduleData.dataArr">
        <el-table-column property="name" label="名称" min-width="210"></el-table-column>
        <el-table-column property="value" label="数量"></el-table-column>
        <el-table-column property="rate" label="占比"></el-table-column>
        <el-table-column label="详情"> 
          <template slot-scope="scope">
            <el-button type="primary"  size="small" @click="showDetail(scope.row)">详情</el-button>
            </template>
        </el-table-column>        
      </el-table>
      <el-pagination
        @size-change="handleModuleSizeChange"
        @current-change="handleModuleCurrentChange"
        :current-page="moduleData.currPage"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="moduleData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="moduleData.totalCount">
      </el-pagination>      
    </el-dialog>
  </div>
</template>
<script>
  import echarts from 'echarts'
  import moment from 'moment'
  import lodash from 'lodash'

  export default {
    data () {
      return {
        selectForm: {
          httpCode: '403',
          httpCodes: [],
          appId: '',
          appIds: [],
          dateRange: [moment().format('YYYY-MM-DD 00:00'), moment().format('YYYY-MM-DD HH:mm')]
        },
        titleDate: moment(new Date()).format('YYYY-MM-DD'),
        osLoading: false,
        appVersionLoading: false,
        uriLoading: false,
        chartsInstance: {
          os: '',
          appVersion: '',
          uri: ''
        },
        osLegend: [],
        osData: [],
        allOsData: [],
        osDataSum: 0,
        appVersionLegend: [],
        appVersionData: [],
        allAppVersionData: [],
        appVersionDataSum: 0,
        uriLegend: [],
        uriData: [],
        allUriData: [],
        uriDataSum: 0,
        optionTitle: '选项标题',
        optionVisible: false,
        optionParams: {
          type: '',
          column: '',
          currPage: 1,
          pageSize: 10,
          totalCount: 0
        },
        optionData: [],
        isModule: false,
        moduleTitle: '模块标题',
        moduleVisible: false,
        moduleData: {
          data: [],
          currPage: 1,
          pageSize: 10,
          totalCount: 0,
          dataArr: []
        }
      }
    },
    activated () {
      this.getCodeList()
      this.getPageData()
      this.getAppIdList()
    },
    methods: {
      getCodeList () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/codes/getCodes'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.selectForm.httpCodes = data.data
          }
        })
      },
      getAppIdList () {
        var vm = this
        vm.$http({
          url: vm.$http.adornUrl('/appconf/getAppList'),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.selectForm.appIds = data.data
          }
        })
      },
      getPageData () {
        var vm = this
        var params = []
        var url = '/codes/list'

        vm.osLoading = true
        vm.appVersionLoading = true
        vm.uriLoading = true

        var appId = vm.selectForm.appId
        if (appId !== null && appId !== '') {
          params.push('appId=' + appId)
        }

        var httpCode = vm.selectForm.httpCode
        if (httpCode !== null && httpCode !== '') {
          params.push('code=' + httpCode)
        } else {
          params.push('code=403')
        }

        if (vm.selectForm.dateRange !== null && vm.selectForm.dateRange !== '') {
          var startTime = vm.selectForm.dateRange[0]
          params.push('startTime=' + moment(startTime).format('YYYY-MM-DD HH:mm'))

          var endTime = vm.selectForm.dateRange[1]
          params.push('endTime=' + moment(endTime).format('YYYY-MM-DD HH:mm'))
        }

        url += (params.length > 0 ? '?' + params.join('&') : '')

        // console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            var response = data.data
            var num = 20

            //  总量获取
            vm.allOsData = response.os.map(item => {
              if (item.name === null) {
                return {name: 'Null', value: item.num}
              } else {
                return {name: item.name, value: item.num}
              }
            })
            if (response.os.length > num) {
              var osOther = 0
              var top = lodash.take(response.os, num)
              var bottom = lodash.takeRight(response.os, (response.os.length - num))
              bottom.map(item => {
                osOther += item.num
              })
              top = top.map(item => {
                if (item.name === null) {
                  return {name: 'Null', value: item.num}
                } else {
                  return {name: item.name, value: item.num}
                }
              })
              top.push({name: '其他', value: osOther})
              vm.osData = lodash.sortBy(top, function (item) { // 倒序加'-'
                return -item.value
              })
            } else {
              vm.osData = response.os.map(item => {
                if (item.name === null) {
                  return {name: 'Null', value: item.num}
                } else {
                  return {name: item.name, value: item.num}
                }
              })
            }

            vm.osLegend = vm.osData.map(item => {
              return item.name
            })
            vm.osDataSum = response.ossum

            //  总量获取
            vm.allAppVersionData = response.appversion.map(item => {
              if (item.name === null) {
                return {name: 'Null', value: item.num}
              } else {
                return {name: item.name, value: item.num}
              }
            })
            if (response.appversion.length > num) {
              var appversionOther = 0
              top = lodash.take(response.appversion, num)
              bottom = lodash.takeRight(response.appversion, (response.appversion.length - num))
              bottom.map(item => {
                appversionOther += item.num
              })
              top = top.map(item => {
                if (item.name === null) {
                  return {name: 'Null', value: item.num}
                } else {
                  return {name: item.name, value: item.num}
                }
              })
              top.push({name: '其他', value: appversionOther})
              vm.appVersionData = lodash.sortBy(top, function (item) { // 倒序加'-'
                return -item.value
              })
            } else {
              vm.appVersionData = response.appversion.map(item => {
                if (item.name === null) {
                  return {name: 'Null', value: item.num}
                } else {
                  return {name: item.name, value: item.num}
                }
              })
            }

            vm.appVersionLegend = vm.appVersionData.map(item => {
              return item.name
            })
            vm.appVersionDataSum = response.appversionsum

            //  总量获取
            vm.allUriData = response.uri.map(item => {
              if (item.name === null) {
                return {name: 'Null', value: item.num}
              } else {
                return {name: item.name, value: item.num}
              }
            })
            if (response.uri.length > num) {
              var uriOther = 0
              top = lodash.take(response.uri, num)
              bottom = lodash.takeRight(response.uri, (response.uri.length - num))
              bottom.map(item => {
                uriOther += item.num
              })
              top = top.map(item => {
                if (item.name === null) {
                  return {name: 'Null', value: item.num}
                } else {
                  return {name: item.name, value: item.num}
                }
              })
              top.push({name: '其他', value: uriOther})
              vm.uriData = lodash.sortBy(top, function (item) { // 倒序加'-'
                return -item.value
              })
            } else {
              vm.uriData = response.uri.map(item => {
                if (item.name === null) {
                  return {name: 'Null', value: item.num}
                } else {
                  return {name: item.name, value: item.num}
                }
              })
            }

            vm.uriLegend = vm.uriData.map(item => {
              return item.name
            })
            vm.uriDataSum = response.urisum

            vm.isModule = true
            vm.initEcharts()
          }
        })
      },
      initEcharts () {
        var vm = this
        vm.chartsInstance.os = echarts.init(document.getElementById('os-report'))
        vm.chartsInstance.appVersion = echarts.init(document.getElementById('appversion-report'))
        vm.chartsInstance.uri = echarts.init(document.getElementById('uri-report'))
        vm.getOsReport()
        vm.getAppVersionReport()
        vm.getUriReport()
        window.addEventListener('resize', () => {
          vm.chartsInstance.os.resize()
          vm.chartsInstance.appVersion.resize()
          vm.chartsInstance.uri.resize()
        })
      },
      getOsReport () {
        var vm = this
        vm.osLoading = true
        let title = vm.osData.length > 0 ? '品牌' : '暂无数据'
        var option = {
          title: {
            text: title,
            top: 'center',
            left: 'center',
            textStyle: {
              fontSize: 12,
              color: '#333'
            }
          },
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.percent + '%'
            }
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          roam: false, // 鼠标缩放及平移
          focusNodeAdjacency: false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
          // color: ['#345BA0', '#3F8B65', '#61B34A', '#6FA1CC', '#34A0D9', '#3191D8', '#378AAC', '#2B76B3'],
          color: ['#345BA0', '#00A65A', '#3F8B65', '#61B34A', '#605ca8', '#34A0D9', '#00C0EF', '#39CCCC', '#3191D8', '#378AAC', '#F39C12', '#FF851B'],
          // color: ['#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A', '#6E7074', '#546570', '#C4CCD3'],
          legend: {
            bottom: 0,
            data: vm.osLegend
          },
          series: [
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: ['27%', '44%'],
              center: ['50%', '50%'],
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: '#fff',
                  labelLine: {
                    length: 35,
                    show: false
                  }
                }
              },
              label: {
                normal: {
                  show: false,
                  formatter: '{d}%\n{b}'
                }
              },
              data: vm.osData
            },
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: ['45%', '48%'],
              center: ['50%', '50%'],
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#fff',
                  label: {
                    show: true,
                    formatter: '{b|{b}} {per|{d}}%',
                    rich: {
                      per: {
                        fontSize: 12,
                        fontWeight: 700
                      },
                      b: {
                        color: '#fff',
                        backgroundColor: '#334455',
                        padding: [2, 3],
                        borderRadius: 1
                      }
                    }
                  },
                  labelLine: {
                    show: true,
                    length: 20
                  }
                }
              },
              data: vm.osData
            }
          ]
        }
        vm.chartsInstance.os.setOption(option)
        vm.osLoading = false

        vm.chartsInstance.os.on('click', function (param) {
          vm.optionTitle = '品牌：' + param.name
          vm.optionParams.type = 'Brand'
          if (param.name === '其他') {
            var columnArr = []
            vm.osLegend.map(item => {
              if (item !== '其他') {
                columnArr.push(item)
              }
            })
            vm.optionParams.column = columnArr.join(',')
          } else {
            vm.optionParams.column = param.name
          }
          vm.getOptionData()
        })
      },
      getAppVersionReport () {
        var vm = this
        vm.appVersionLoading = true
        let title = vm.appVersionData.length > 0 ? 'AppVersion' : '暂无数据'
        var option = {
          title: {
            text: title,
            top: 'center',
            left: 'center',
            textStyle: {
              fontSize: 12,
              color: '#333'
            }
          },
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.percent + '%'
            }
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          roam: false, // 鼠标缩放及平移
          focusNodeAdjacency: false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
          // color: ['#345BA0', '#3F8B65', '#61B34A', '#6FA1CC', '#34A0D9', '#3191D8', '#378AAC', '#2B76B3'],
          color: ['#345BA0', '#00A65A', '#3F8B65', '#61B34A', '#605ca8', '#34A0D9', '#00C0EF', '#39CCCC', '#3191D8', '#378AAC', '#F39C12', '#FF851B'],
          // color: ['#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A', '#6E7074', '#546570', '#C4CCD3'],
          legend: {
            bottom: 0,
            data: vm.appVersionLegend
          },
          series: [
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: ['27%', '44%'],
              center: ['50%', '50%'],
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: '#fff',
                  labelLine: {
                    length: 35,
                    show: false
                  }
                }
              },
              label: {
                normal: {
                  show: false,
                  formatter: '{d}%\n{b}'
                }
              },
              data: vm.appVersionData
            },
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: ['45%', '48%'],
              center: ['50%', '50%'],
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#fff',
                  label: {
                    show: true,
                    formatter: '{b|{b}} {per|{d}}%',
                    rich: {
                      per: {
                        fontSize: 12,
                        fontWeight: 700
                      },
                      b: {
                        color: '#fff',
                        backgroundColor: '#334455',
                        padding: [2, 3],
                        borderRadius: 1
                      }
                    }
                  },
                  labelLine: {
                    show: true,
                    length: 20
                  }
                }
              },
              data: vm.appVersionData
            }
          ]
        }
        vm.chartsInstance.appVersion.setOption(option)
        vm.appVersionLoading = false

        vm.chartsInstance.appVersion.on('click', function (param) {
          vm.optionTitle = 'appVersion：' + param.name
          vm.optionParams.type = 'AppVersion'
          if (param.name === '其他') {
            var columnArr = []
            vm.appVersionLegend.map(item => {
              if (item !== '其他') {
                columnArr.push(item)
              }
            })
            vm.optionParams.column = columnArr.join(',')
          } else {
            vm.optionParams.column = param.name
          }
          vm.getOptionData()
        })
      },
      getUriReport () {
        var vm = this
        vm.uriLoading = true
        let title = vm.uriData.length > 0 ? 'URI' : '暂无数据'
        var option = {
          title: {
            text: title,
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 12,
              color: '#333'
            }
          },
          tooltip: {
            formatter: function (params) {
              return params.name + ': ' + params.percent + '%'
            }
          },
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          roam: false, // 鼠标缩放及平移
          focusNodeAdjacency: false, // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
          // color: ['#345BA0', '#3F8B65', '#61B34A', '#6FA1CC', '#34A0D9', '#3191D8', '#378AAC', '#2B76B3'],
          color: ['#345BA0', '#00A65A', '#3F8B65', '#61B34A', '#605ca8', '#34A0D9', '#00C0EF', '#39CCCC', '#3191D8', '#378AAC', '#F39C12', '#FF851B'],
          // color: ['#2F4554', '#61A0A8', '#D48265', '#91C7AE', '#749F83', '#CA8622', '#BDA29A', '#6E7074', '#546570', '#C4CCD3'],
          legend: {
            bottom: 0,
            data: vm.uriLegend
          },
          series: [
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: ['27%', '44%'],
              center: ['50%', '44%'],
              itemStyle: {
                normal: {
                  borderWidth: 1,
                  borderColor: '#fff',
                  labelLine: {
                    length: 35,
                    show: false
                  }
                }
              },
              label: {
                normal: {
                  show: false,
                  formatter: '{d}%\n{b}'
                }
              },
              data: vm.uriData
            },
            {
              name: '状态码',
              type: 'pie',
              startAngle: 90,
              hoverAnimation: false,
              radius: ['45%', '48%'],
              center: ['50%', '44%'],
              itemStyle: {
                normal: {
                  borderWidth: 4,
                  borderColor: '#fff',
                  label: {
                    show: true,
                    formatter: '{b|{b}} {per|{d}}%',
                    rich: {
                      per: {
                        fontSize: 12,
                        fontWeight: 700
                      },
                      b: {
                        color: '#fff',
                        backgroundColor: '#334455',
                        padding: [2, 3],
                        borderRadius: 1
                      }
                    }
                  },
                  labelLine: {
                    show: true,
                    length: 20
                  }
                }
              },
              data: vm.uriData
            }
          ]
        }
        vm.chartsInstance.uri.setOption(option)
        vm.uriLoading = false

        vm.chartsInstance.uri.on('click', function (param) {
          vm.optionTitle = 'URI：' + param.name
          vm.optionParams.type = 'URI'
          if (param.name === '其他') {
            var columnArr = []
            vm.uriLegend.map(item => {
              if (item !== '其他') {
                columnArr.push(item)
              }
            })
            vm.optionParams.column = columnArr.join(',')
          } else {
            vm.optionParams.column = param.name
          }
          vm.getOptionData()
        })
      },
      // 详情
      showDetail (row) {
        var vm = this
        if (vm.moduleTitle === '品牌') {
          vm.optionParams.type = 'Brand'
          vm.optionTitle = '品牌：' + row.name
        } else if (vm.moduleTitle === 'appVersion') {
          vm.optionParams.type = 'AppVersion'
          vm.optionTitle = 'appVersion：' + row.name
        } else if (vm.moduleTitle === 'URI') {
          vm.optionParams.type = 'URI'
          vm.optionTitle = 'URI：' + row.name
        }
        vm.optionParams.column = row.name
        vm.getOptionData()
      },
      // 获取模块中某个选项的数据
      getOptionData () {
        var vm = this
        var params = []
        var url = '/codes/getDetails'

        if (vm.optionParams.type !== '' && vm.optionParams.type !== null) {
          params.push('type=' + vm.optionParams.type)
        }

        if (vm.optionParams.column !== '' && vm.optionParams.column !== null) {
          params.push('column=' + vm.optionParams.column)
        }

        if (vm.optionParams.currPage !== '' && vm.optionParams.currPage !== null) {
          params.push('currPage=' + vm.optionParams.currPage)
        }

        if (vm.optionParams.pageSize !== '' && vm.optionParams.pageSize !== null) {
          params.push('pageSize=' + vm.optionParams.pageSize)
        }

        if (vm.selectForm.httpCode !== null && vm.selectForm.httpCode !== '') {
          params.push('code=' + vm.selectForm.httpCode)
        } else {
          params.push('code=403')
        }

        if (vm.selectForm.dateRange !== null && vm.selectForm.dateRange !== '') {
          var startTime = vm.selectForm.dateRange[0]
          params.push('startTime=' + moment(startTime).format('YYYY-MM-DD HH:mm'))

          var endTime = vm.selectForm.dateRange[1]
          params.push('endTime=' + moment(endTime).format('YYYY-MM-DD HH:mm'))
        }

        url += (params.length > 0 ? '?' + params.join('&') : '')
        // console.log(url)

        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            vm.optionData = data.data.list
            vm.optionParams.totalCount = data.data.totalCount
            vm.optionVisible = true
          }
        })
      },
      // 获取整个模块的数据
      getModuleData (type) {
        var vm = this
        vm.moduleVisible = true
        if (type === 'os') {
          vm.moduleTitle = '品牌'
          vm.moduleData.data = vm.allOsData.map(item => {
            return {
              name: item.name,
              value: item.value,
              rate: (item.value / vm.osDataSum * 100).toFixed(2) + '%'
            }
          })
        } else if (type === 'appVersion') {
          vm.moduleTitle = 'appVersion'
          vm.moduleData.data = vm.allAppVersionData.map(item => {
            return {
              name: item.name,
              value: item.value,
              rate: (item.value / vm.appVersionDataSum * 100).toFixed(2) + '%'
            }
          })
        } else if (type === 'uri') {
          vm.moduleTitle = 'URI'
          vm.moduleData.data = vm.allUriData.map(item => {
            return {
              name: item.name,
              value: item.value,
              rate: (item.value / vm.uriDataSum * 100).toFixed(2) + '%'
            }
          })
        }
        var currPage = vm.moduleData.currPage
        var pageSize = vm.moduleData.pageSize
        var offset = (currPage - 1) * pageSize
        vm.moduleData.dataArr = vm.moduleData.data.slice(offset, offset + pageSize)
        vm.moduleData.totalCount = vm.moduleData.data.length
      },
      formatTime (row, column, cellValue, index) {
        if (cellValue !== null) {
          return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
        } else {
          return cellValue
        }
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`)
        var vm = this
        vm.optionParams.pageSize = val
        vm.getOptionData()
      },
      handleCurrentChange (val) {
        console.log(`当前页：${val}`)
        var vm = this
        vm.optionParams.currPage = val
        vm.getOptionData()
      },
      handleModuleSizeChange (val) {
        var vm = this
        vm.moduleData.pageSize = val
        var type = ''
        if (vm.moduleTitle === '品牌') {
          type = 'os'
        } else if (vm.moduleTitle === 'appVersion') {
          type = 'appVersion'
        } else if (vm.moduleTitle === 'URI') {
          type = 'uri'
        }
        vm.getModuleData(type)
      },
      handleModuleCurrentChange (val) {
        var vm = this
        var type = ''
        vm.moduleData.currPage = val
        if (vm.moduleTitle === '品牌') {
          type = 'os'
        } else if (vm.moduleTitle === 'appVersion') {
          type = 'appVersion'
        } else if (vm.moduleTitle === 'URI') {
          type = 'uri'
        }
        vm.getModuleData(type)
      },
      moduleHide () {
        this.moduleVisible = false
        this.moduleData.currPage = 1
        this.moduleData.pageSize = 10
      }
    }
  }
</script>
<style scoped>
.crash-report > .el-form{
  text-align: right;
  border-bottom: 1px solid #eee;
}
.crash-report .el-button{
  padding: 8px 15px;
  font-size: 14px;
}
.crash-report .el-row{
  margin-bottom: 20px;
}
.crash-report .http-code-title{
  font-size: 18px;
}
.crash-report .el-col{
  position: relative;
}
.crash-report .btn-center{
  position: absolute;
  top: 1%;
  right: 10%;
  z-index: 100;
  padding: 5px 10px;
  font-size: 22px;
  border: none;
}
.crash-report .table-form-expand{
  font-size: 0;
}
.crash-report .table-form-expand label {
  display: inline-block;
  width: 110px;
  color: #99a9bf;
  text-align: right;
  font-size: 14px;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.crash-report .table-form-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.crash-report .table-form-expand .el-form-item.line-block{
  display: block;
  width: 100%;
}
.line-break{
  word-break:break-all;
  word-wrap:break-word
}
.defined-close-btn{
  position: absolute;
  left: 15px;
  top: 17px;
}
.err-title{
  font-size: 16px;
  margin-left: 10px;
}
</style>

